<template>
	<div >
		<el-table
			v-loading="loading"
			id="crm-table"
			:data="list" 
			class="n-table--border"
			:cell-style="cellStyle"
			stripe
			border
			height="410px"
			highlight-current-row
			style="width: 100%"
			@row-click="handleRowClick"
			@sort-change="sortChange">
			<template slot="empty"> 
				<el-empty 
					description="暂无数据"></el-empty>
			</template>
			<el-table-column
				v-for="(item, index) in fieldList"
				v-if="item.prop == 'name'"
				:key="index"
				:prop="item.prop"
				:label="item.label"
				:formatter="fieldFormatter">
			</el-table-column>
			<el-table-column
				v-else
				:key="index"
				:prop="item.prop"
				:label="item.label"
				:formatter="fieldFormatter">
				<template
				  slot="header"
				  slot-scope="scope">
				  <div class="table-head-name">{{ scope.column.label }}</div>
				</template>
			</el-table-column>
		</el-table>
		<div class="p-contianer">
			<el-pagination 
				:current-page="currentPage"
				:page-sizes="pageSizes"
				:page-size.sync="pageSize"
				:total="total"
				class="p-bar"
				layout="total, sizes, prev, pager, next"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"/>
		</div>
		
	</div>
</template>

<script>
	// 时间格式化
	import moment from 'moment'
	import Lockr from 'lockr'
	
	import { getWeekCourt } from '@/api/index/index'
	import { filedGetField } from '@/api/setting/setting'
	import {
		getDateFromTimestamp
	} from '@/utils'
	export default {
		data(){
			return{
				// 加载动画
				loading: false,  
				// 表格数据
				list: [],
				// 字段数据
				fieldList: [],
				// 格式化规则
				formatterRules: {},
				// 页码
				currentPage: 1,
				pageSize: Lockr.get('crmPageSizes') || 15,
				pageSizes: [15, 30, 60, 100],
				total: 0,
				// 排序
				sortData: {},
				// 表格为空的时候显示的文本
				dataText:'',
				
				
			}
		},
		props:{
		},
		
		mounted() {
			this.getFieldList()
		},
		methods:{
			getList(){
				this.loading = true
				var crmIndexRequest = getWeekCourt
				var params = {
					page: this.currentPage,
					limit: this.pageSize,
					search_v: this.search
				}
				
				if (this.sortData.order) {
					params.order_field = this.sortData.prop
					params.order_type = this.sortData.order == 'ascending' ? 'asc' : 'desc'
				}
				
				crmIndexRequest(params).then(res => {
					this.list = res.data.list
					this.dataText = "暂无数据"
					this.total = res.data.count
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			},
			
			/** 通过回调控制style */
			cellStyle({ row, column, rowIndex, columnIndex }) {
			  if (column.property === 'name') {
			    return { color: '#3E84E9', cursor: 'pointer' }
			  } else {
			    return ''
			  }
			},
			
			
			/** 列表操作 */
			handleRowClick(row, column, event) {
				if (column.type === 'selection') {
				  return // 多选布局不能点击
				}
				
				if (column.property === 'name') {
					this.$router.push({
						path:"/lawcase/read/"+row.lawcase_id
					}) 
				}
				// this.$emit('handle-row-click',column.property,row.lawcase_id)
			},
			
			/** 字段排序*/
			sortChange(column, prop, order) {
				this.sortData = column
				this.getList()
			},
			
			getFieldList(){
				if (this.fieldList.length == 0) {
					var params = {
						types: 'crm_lawcase',
						module: 'crm',
						action: 'index',
						controller: 'lawcase',
						actiontype:93
					}
						
					filedGetField(params)
						.then(res => {
							for (let index = 0; index < res.data.length; index++) {
								const element = res.data[index]
								/** 获取需要格式化的字段 和格式化的规则 */
								if (element.form_type === 'date') {
									this.formatterRules[element.field] = {
										formatter: function fieldFormatter(time) {
											if (time == '0000-00-00') {
												time = ''
											}
											if (time) {
												return moment(getDateFromTimestamp(time)).format(
													'YYYY-MM-DD'
												)
											}
											
											
										}
									}
								} else if (element.form_type === 'datetime') {
									this.formatterRules[element.field] = {
										formatter: function fieldFormatter(time) {
											if (time == 0 || !time) {
												return ''
											}
											return moment(getDateFromTimestamp(time)).format(
												'YYYY-MM-DD HH:mm:ss'
											)
										}
									}
								} else if (element.form_type === 'user') {
									this.formatterRules[element.field] = {
										type: 'crm',
										formatter: function fieldFormatter(info) {
											return info ? info[0].username : ''
										}
									}
								} else if (element.form_type === 'user-multiple') {
									this.formatterRules[element.field] = {
										type: 'crm',
										formatter: function fieldFormatter(info) {
											if (info) {
												var content = ''
												for (let index = 0; index < info.length; index++) {
													const element = info[index]
													content = content + element.username + (index === (info
														.length - 1) ? '' : ',')
												}
												return content
											}
											return ''
										}
									}
								} else if (element.form_type === 'floatnumber') {
									this.formatterRules[element.field] = {
										type: 'floatnumber',
										formatter: function fieldFormatter(info) {
											return moneyFormat(info)
										}
									}
								} else if (element.form_type === 'select-multiple') {
									this.formatterRules[element.field] = {
										type: 'array',
										formatter: function fieldFormatter(info) {
											return info
										}
									}
								}
						
								var width = 0
								if (!element.width) {
									if (element.form_type == 'datetime') {
										width = 150
									} else if (element.form_type == 'textarea') {
										width = 350
									} else {
										width = 105
									}
								} else {
									width = element.width
								}
						
								this.fieldList.push({
									prop: element.field,
									label: element.name,
									width: width
								})
							}
							// 获取好字段开始请求数据
							this.getList()
						})
						.catch(() => {
							this.loading = false
						})
				} else {
					// 获取好字段开始请求数据
					this.getList()
				}
			},
			
			/** 格式化字段 */
			fieldFormatter(row, column) {
				// 如果需要格式化
				var aRules = this.formatterRules[column.property]
				if (aRules) {
					if (aRules.type === 'crm') {
						if (column.property) {
							return aRules.formatter(row[column.property + '_info']) || '--'
						} else {
							return ''
						}
					} else {
						return aRules.formatter(row[column.property]) || '--'
					}
				}
				return row[column.property] || '--'
			},
			
			handleSizeChange(val) {
				Lockr.set('crmPageSizes', val)
				this.pageSize = val
				this.getList()
			},
			
			/**  更改当前页数*/
			handleCurrentChange(val) {
				this.currentPage = val
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	/** 勾选操作 */
	.selection-bar {
	  font-size: 12px;
	  height: 50px;
	  padding: 0 10px;
	  color: #777;
		overflow-x: auto;
		// overflow-y: hidden;
		white-space: nowrap;
	  .selected—title {
	    flex-shrink: 0;
			line-height: 50px;
	    padding-right: 20px;
	    .selected—count {
	      color: #666;
	    }
	  }
	}
	.statustext{
		color: #333;
		cursor: pointer;
		background-color: white;
	}
	.statustext:hover {
	  color: rgb(62, 132, 233);
	}
	
	.el-table /deep/ .cell {
	  white-space:pre-wrap !important;
	}
	
	.el-table /deep/ .el-tooltip {
	  white-space:nowrap !important;
	}
	
	.el-table /deep/ th div.cell{
		text-align: center;
	}
	.p-contianer{
		background-color: #fff;
		padding:15px
	}
	
</style>
